const log = console.log.bind(console)
// 测试数组
// let s = '[[9,1,0,0,0,1,1,1,0],[1,1,0,0,1,2,9,1,0],[1,1,1,0,1,9,2,1,0],[1,9,2,1,1,1,1,0,0],[1,2,9,1,0,0,1,1,1],[1,2,1,1,0,1,2,9,1],[9,1,0,0,1,2,9,2,1],[1,2,1,1,1,9,2,1,0],[0,1,9,1,1,1,1,0,0]]'
// let square = JSON.parse(s)
let saolei = document.querySelector('div#SaoLei')
let zhuti =document.querySelector('div#ZhuTi')

//随机生成0或者9，调整Math.random可以调节难度
const random01 = function() {
    if (Math.random() > 0.8) {
        return 9
    } else {
        return 0
    }
}
//调用random01，随机生成一行数组
const randomLine01 = function(n) {
    let s = []
    for (let i = 0; i < n; i++) {
        let a = random01()
        s.push(a)
    }
    return s
}
//调用randomline01,生成一串只有0和9的二维数组
const randomSquare01 = function(n) {
    let s = []
    for (let i = 0; i < n; i++) {
        let a = randomLine01(n)
        s.push(a)
    }
    return s
}
//处理目标数组中等于9时，上下左右八个元素的标记情况
const plus1 = function(array, x, y) {
    // 1, array[x][y] 不能是 9
    // 2, x 和 y 必须满足边界条件
    let n = array.length
    if (x >= 0 && x < n && y >= 0 && y < n) {
        if (array[x][y] !== 9) {
            array[x][y] += 1
        }
    }
}
//处理目标元素的上下左右八个方位等于9的情况，处理边界标记中边界问题
const markAround = function(array, x, y) {
    if (array[x][y] === 9) {
        // 先标记左边 3 个
        plus1(array, x - 1, y - 1)
        plus1(array, x, y - 1)
        plus1(array, x + 1, y - 1)

        // 标记上下 2 个
        plus1(array, x - 1, y)
        plus1(array, x, y)
        plus1(array, x + 1, y)

        // 再标记右边 3 个
        plus1(array, x - 1, y + 1)
        plus1(array, x, y + 1)
        plus1(array, x + 1, y + 1)
    }
}
//将旧数据数组保存至一个新数组
const clonedArray = function(array) {
    return array.slice(0)
}
//遍历数组中每一元素，并调用cloneArray处理
const clonedSquare = function(array) {
    let l = []
    for (let i = 0; i < array.length; i++) {
        let e = array[i]
        let line = clonedArray(e)
        l.push(line)
    }
    return l
}
//遍历数组每一元素，调用markAround进行处理标记问题
const markedSquare = function(array) {
    let square = clonedSquare(array)
    for (let i = 0; i < square.length; i++) {
        let line = square[i]
        for (let j = 0; j < line.length; j++) {
            markAround(square, i, j)
        }
    }
    return square
}
//输出处理完成的数组
const shuShen = (x) => {
    let a = randomSquare01(x)
    return markedSquare(a)
}


//生成一行
//1、b是一个数组。所以要遍历数组
//2、x是一个行数。直接插入不介入流程内
//3、列的拿取从遍历的i里得到
const scyh = (b,x) => {
    let a = ''
    for (let i = 0; i < b.length; i++) {
        a = a + `<div class="cell" data-number="${b[i]}" data-x="${x}" data-y="${i}">${b[i]}</div>`
    }
    return a
}
//生成一片
const scyp = (x) => {
    let a = ''
    for (let i = 0; i < x.length; i++) {
        let s = Object(x[i])
        a = a + '<div class="fenge">' + scyh(s,i) + '</div>'
    }
    return a
}
//得到数组，插入页面
const charu = (x) => {
    let a = scyp(x)
    zhuti.innerHTML = a
}


//点到哪一个
const diandao = () => {
    zhuti.addEventListener('click',function (event) {
        let self = event.target
        self.classList.remove('guanbi09')
        zhankai(self)
    //    差一个调用
    })
}
//点到谁，谁展开
const zhankai = (x) => {
    let a = Number(x.getAttribute('data-number'))
    if (a === 9) {
        let s = document.querySelectorAll('div[data-number="9"]')
        for (let i = 0; i < s.length; i++) {
            s[i].classList.add('open')
        }
        //用定时器延迟一下弹窗时间
        setTimeout(function() {
            alert("游戏结束")
        }, 10)
    } else if (a === 0) {
        // log('点到0了')
        let X = Number(x.getAttribute('data-x'))
        let Y = Number(x.getAttribute('data-y'))
        x.classList.add('open')
        panduan(X,Y)
    } else {
        x.classList.add('open')
    }
}
//点到0的时候，把上下左右八个格子的内容存到数组
const panduan = (x,y) => {
    let a = document.querySelector(`[data-x="${x}"][data-y="${y}"]`)
    // 上面
    let shuzu = []
    shuzu.push(document.querySelector(`[data-x="${x - 1}"][data-y="${y - 1}"]`))
    shuzu.push(document.querySelector(`[data-x="${x - 1}"][data-y="${y}"]`))
    shuzu.push(document.querySelector(`[data-x="${x - 1}"][data-y="${y + 1}"]`))
    //左边
    shuzu.push(document.querySelector(`[data-x="${x}"][data-y="${y - 1}"]`))
    shuzu.push(document.querySelector(`[data-x="${x}"][data-y="${y + 1}"]`))
    //下面
    shuzu.push(document.querySelector(`[data-x="${x + 1}"][data-y="${y - 1}"]`))
    shuzu.push(document.querySelector(`[data-x="${x + 1}"][data-y="${y}"]`))
    shuzu.push(document.querySelector(`[data-x="${x + 1}"][data-y="${y + 1}"]`))
    // log(shuzu)
    for (let i = 0; i < shuzu.length; i++) {
        //点到0执行的循环,差一个函数
        // log(shuzu[i] !== null && shuzu[i].className !== 'cell open')
        if (shuzu[i] !== null && shuzu[i].className !== 'cell open') {
            feijiu(shuzu[i])
        }
    }
}
//判断是否为null，不是的话查询内容是否9，不是则展开
const feijiu = (x) => {
    let a = Number(x.getAttribute('data-number'))
    if (a === 0) {
        let X = Number(x.getAttribute('data-x'))
        let Y = Number(x.getAttribute('data-y'))
        x.classList.add('open')
        panduan(X,Y)
    } else if (a !== 9) {
        return x.classList.add('open')
    } else {}
}





//右键格子时候添加样式
const shenli = () => {
    let s = document.querySelectorAll('.cell')
    for (let i = 0; i < s.length; i++) {
        s[i].addEventListener('contextmenu',function (event) {
            let self = event.target
            youjian(self)
            zuihou(self)
        })
    }
}
//判断右键添加样式或取消
const youjian = (x) => {
    let a = x.className
    if (a === 'cell') {
        x.classList.add('guanbi09')
    } else {
        x.classList.remove('guanbi09')
    }
}

//找到有多少雷
const duoshaolei = () => {
    let a = ''
    let x = document.querySelectorAll('div[data-number="9"]')
    document.querySelector("#lei").innerHTML = x.length
    return x.length
}

//如果标记样式的东西和雷一样多就胜利
//1、拿到所以已经标记好的格子
//2、判断已经标记的格子的数组内多少是9
//3。输出多少个9
const shenglei = (x) => {
    let s = document.querySelectorAll(".guanbi09")
    let b = ''
    for (let i = 0; i < s.length; i++) {
        let a = s[i].getAttribute("data-number")
        if (a === '9') {
            b++
        }
    }
    return b
}
//调用标记了多少雷，和一共有多少雷，判断之后弹窗
const zuihou = (x) => {
    let a = duoshaolei()
    let b = shenglei(x)
    if (a === b) {
        alert("游戏胜利")
    }
}

//游戏开始
const chonxin01= () => {
    document.querySelector('#game').addEventListener('click',function () {
        let a = shuShen(9)
        charu(a)
        shenli()
        duoshaolei()
    })
}
const _min = () => {
    let a = shuShen(9)
    charu(a)
    shenli()
    duoshaolei()
    chonxin01()
    diandao()
}
_min()